<template>
  <div
    class="login1"
    :style="{
      backgroundImage: 'url(' + require('@/assets/demo/bg1.jpeg') + ')',
    }"
  >
    <Col :xs="22" :sm="20" :md="14" :lg="10" :xl="7">
      <Card>
        <div class="container">
          <img src="@/assets/logo-black.png" class="logo" />
          <div class="regist">现在还没有账号？<a>立即注册</a></div>
          <Form
            ref="form"
            :model="form"
            :rules="rules"
            label-position="top"
            class="form"
          >
            <FormItem label="账号/邮箱/手机号" prop="username">
              <Input
                v-model="form.username"
                prefix="ios-contact"
                size="large"
                clearable
                placeholder="账号/邮箱/手机号"
                autocomplete="off"
              />
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input
                type="password"
                v-model="form.password"
                prefix="ios-lock"
                size="large"
                password
                placeholder="请输入密码"
                autocomplete="off"
              />
            </FormItem>
          </Form>
          <Button
            type="primary"
            size="large"
            :loading="loading"
            @click="submitLogin"
            long
            class="btn"
          >
            登录
          </Button>
          <Divider plain>第三方账号登录</Divider>
          <div class="other-login">
            <button class="o-btn" style="margin-right: 7px">
              <img src="@/assets/icon/qq.png" />QQ登录
            </button>
            <button class="o-btn">
              <img src="@/assets/icon/weixin.png" />微信登录
            </button>
          </div>
        </div>
      </Card>
    </Col>
  </div>
</template>

<script>
export default {
  name: "login1",
  components: {},
  data() {
    return {
      loading: false,
      form: { username: "", password: "" },
      rules: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submitLogin() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
  },
  mounted() {},
};
</script>

<style lang="less">
.login1 {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    margin: 21px 24px;
    .logo {
      width: 150px;
      height: 50px;
      margin: 10px 0;
    }
    .regist {
      line-height: 1.8;
      margin-bottom: 46px;
    }
    .form {
      width: 100%;
      .ivu-form-item-label {
        color: #455560;
        font-weight: 500;
        line-height: 1.5;
      }
    }
    .btn {
      margin: 4px 0 20px 0;
    }
    .ivu-divider-inner-text {
      color: rgba(114, 132, 154, 0.7);
    }
    .other-login {
      display: flex;
      justify-content: center;
      align-items: center;
      .o-btn {
        line-height: 1.5;
        position: relative;
        display: flex;
        align-items: center;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        border: 1px solid rgb(230, 235, 241);
        box-shadow: rgb(0 0 0 / 2%) 0px 2px 0px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
        user-select: none;
        touch-action: manipulation;
        height: 40px;
        padding: 8.5px 1.25rem;
        font-size: 14px;
        border-radius: 4px;
        color: rgb(69, 85, 96);
        background: rgb(255, 255, 255);
        &:hover {
          background-color: rgb(237, 237, 237);
          border-color: rgb(237, 237, 237);
        }
        img {
          width: 14px;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
